<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片搜索系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .upload-section, .search-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="file"] {
            display: block;
            margin-bottom: 10px;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result-section {
            margin-top: 30px;
        }
        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .image-item {
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
            text-align: center;
        }
        .image-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .image-item p {
            padding: 10px;
            margin: 0;
            font-size: 14px;
        }
        #uploadResult, #searchResult {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>图片搜索系统</h1>
        
        <!-- 图片上传部分 -->
        <div class="upload-section">
            <h2>上传图片</h2>
            <form id="uploadForm">
                <div class="form-group">
                    <label for="uploadFile">选择图片:</label>
                    <input type="file" id="uploadFile" name="file" accept="image/*" required>
                </div>
                <button type="submit">上传图片</button>
            </form>
            <div id="uploadResult"></div>
        </div>
        
        <!-- 图片搜索部分 -->
        <div class="search-section">
            <h2>搜索相似图片</h2>
            <form id="searchForm">
                <div class="form-group">
                    <label for="searchFile">选择图片:</label>
                    <input type="file" id="searchFile" name="file" accept="image/*" required>
                </div>
                <button type="submit">搜索相似图片</button>
            </form>
            <div id="searchResult"></div>
        </div>
        
        <!-- 搜索结果展示 -->
        <div class="result-section">
            <h2>相似图片</h2>
            <div id="imageResults" class="image-grid">
                <!-- 搜索结果将在这里显示 -->
            </div>
        </div>
    </div>

    <script>
        // 处理图片上传
        document.getElementById('uploadForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const fileInput = document.getElementById('uploadFile');
            const resultDiv = document.getElementById('uploadResult');
            
            if (!fileInput.files[0]) {
                showResult(resultDiv, '请选择一个图片文件', 'error');
                return;
            }
            
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            
            fetch('/images/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(data => {
                showResult(resultDiv, data, 'success');
                // 清空文件选择
                fileInput.value = '';
            })
            .catch(error => {
                showResult(resultDiv, '上传失败: ' + error.message, 'error');
            });
        });
        
        // 处理图片搜索
        document.getElementById('searchForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const fileInput = document.getElementById('searchFile');
            const resultDiv = document.getElementById('searchResult');
            const imageResultsDiv = document.getElementById('imageResults');
            
            if (!fileInput.files[0]) {
                showResult(resultDiv, '请选择一个图片文件', 'error');
                return;
            }
            
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            
            // 显示加载状态
            imageResultsDiv.innerHTML = '<p>搜索中...</p>';
            
            fetch('/images/search', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                showResult(resultDiv, '搜索完成', 'success');
                displayImages(data);
            })
            .catch(error => {
                showResult(resultDiv, '搜索失败: ' + error.message, 'error');
                imageResultsDiv.innerHTML = '';
            });
        });
        
        // 显示结果消息
        function showResult(element, message, type) {
            element.textContent = message;
            element.className = type;
        }
        
        // 显示图片结果
        function displayImages(imageUrls) {
            const imageResultsDiv = document.getElementById('imageResults');
            
            if (!imageUrls || imageUrls.length === 0) {
                imageResultsDiv.innerHTML = '<p>未找到相似图片</p>';
                return;
            }
            
            let html = '';
            imageUrls.forEach(url => {
                html += `
                    <div class="image-item">
                        <img src="${url}" alt="相似图片" onerror="this.src='https://via.placeholder.com/200x200?text=图片加载失败'">
                        <p>相似图片</p>
                    </div>
                `;
            });
            
            imageResultsDiv.innerHTML = html;
        }
    </script>
</body>
</html>